<template>
	<view class="container">
		<view :style="{display:loading?'block':'none'}" class="loadingmask"></view>
		<view class="indexDetails_swiper_box">
			<image src="/static/index/nav_back_19.png" class="indexDetails_back" @tap.stop="getBack"></image>
			<swiper  :interval="3000" :duration="1000" circular="true" class="indexDetails_swiper" @change="swiperChange">
				<swiper-item v-for="(item,index) in images" :key='index'>
					<image :src="item" class="indexDetails_swiper_banner" @tap="previewImages(index)"></image>
				</swiper-item>
			</swiper>
			<view class="indexDetails_dots">
				<text>{{nowDots}}</text>
				<text>/</text>
				<text>{{images.length}}</text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="indexDetails_title">
			<text>{{recommenddetail.title}}</text>
		</view>
		<!-- 文章内容 -->
		<view class="indexDetails_article">
			<rich-text :nodes="recommenddetail.content"></rich-text>
		</view>
		<!-- 底部固定栏 -->
		<view class="indexDetails_bottom">
			<input type="text" placeholder="我来说两句..." class="indexDetails_bottom_inputBox" placeholder-class="placStyle" disabled="true" @tap="openTrendscommitsList()">
			<view class="indexDetails_bottom_functionBox">
				<view class="functionBox_list" @tap="giveupWords()">
					<image src="/static/index/icon_x_xz_16.png" class="likeHeart" v-show="ifLike"></image>
					<image src="/static/index/heart2.png" class="heart" v-show="!ifLike"></image>
					<text>{{recommenddetail.giveUpCount}}</text>
				</view>
				<view class="functionBox_list" @tap="collectWords()">
					<image src="/static/index/collect.png" class="heart" v-show="ifCollect"></image>
					<image src="/static/index/icon_wxz_sc_164.png" class="heart" v-show="!ifCollect"></image>
					<text>{{recommenddetail.collectionCount}}</text>
				</view>
				<view class="functionBox_list" @tap="openTrendscommitsList()">
					<image src="/static/index/icon_xx_6.png" class="mesage"></image>
					<text>{{recommenddetail.commentCount}}</text>
				</view>
			</view>
		</view>
		<!-- 评论列表-弹出层 -->
		<u-popup v-model="showTrendscommitsList" mode="bottom" border-radius="20" :closeable="true" height="auto" close-icon-pos="top-left" @close="closeCommitList()">
			<text class="commitslist-title">全部评论{{commitslist.length}}条</text>
			<view class="commitslist">
				<scroll-view :scroll-y="allowScroll" :style="{height:800+'upx',width:'100%',paddingBottom:'20upx'}">
					<view class="commititem" v-for="(commititem,commitindex) in commitslist" :key="commititem.id" @click="changeReplystatus(commititem,commitindex)">
						<!-- 评论信息 -->
						<view class="commitinfo">
							<u-avatar :src="commititem.headOrtrait" size="100"></u-avatar>
							<view class="commits">
								<view class="commit-user-dz">
									<text class="commit-user">{{commititem.userName}}</text>
									<view class="commitdz">
										<text>{{commititem.dianzanUpNum>99?'99+':commititem.dianzanUpNum}}</text>
									    <image src="/static/hearticon-fill.png" style="width: 40rpx;height:40rpx"  @tap.stop="giveupCommit(commititem,commitindex)" v-if="commititem.isWhether=='1'"></image>
									    <image src="/static/hearticon.png" style="width: 40rpx;height:40rpx" @tap.stop="giveupCommit(commititem,commitindex)" v-else></image>
									</view>
								</view>
								<view style="width: 100%;">
									<text class="commit-time">{{commititem.creationTime}}</text>
									<text class="commit-text">{{commititem.content}}</text>
								</view>
								<!-- 评论回复 -->
								<view class="replys" v-for="(replyitem,replyindex) in replysList[commitindex]" v-if="isshowCommitreply[commitindex] && replysList[commitindex].length>0">
									<u-avatar :src="replyitem.headOrtrait"  size="70"></u-avatar>
									<view class="replayinfo">
										<view class="replys-user-dz">
											<text class="commit-user">{{replyitem.userName}}</text>
											<view class="commitdz">
												<text>{{replyitem.dianzanUpNum>99?'99+':replyitem.dianzanUpNum}}</text>
												<!-- <u-icon :name="replyitem.isWhether=='1'?'heart-fill':'heart'" :color="replyitem.isWhether=='1'?'#ff5353':'inherit'" size="30"></u-icon> -->
											    <image src="/static/hearticon-fill.png" style="width: 40rpx;height:40rpx"  @tap.stop="giveupReply(commitindex,replyitem,replyindex)" v-if="replyitem.isWhether=='1'"></image>
												<image src="/static/hearticon.png" style="width: 40rpx;height:40rpx" @tap.stop="giveupReply(commitindex,replyitem,replyindex)" v-else></image>
											</view> 
										</view>
										<view style="width: 100%;">
											<text class="commit-time">{{replyitem.replyTime}}</text>
											<text class="commit-text">{{replyitem.content}}</text>
										</view>
									</view>
								</view>
								<text class="reply-null" v-if="isshowCommitreply[commitindex] && replysList[commitindex].length==0">暂无回复</text>
								<text class="showcommit-reply" v-if="!isshowCommitreply[commitindex]" @tap.stop="showCommitReply(commitindex)">展开此条评论的回复</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sendcommits"  :class="{'input-absolute':iskeyWordspopup}" :style="{bottom:keywordsHeight+'px'}">
				<textarea :placeholder="placeholderText" maxlength="-1" v-model="commitText" confirm-type="send" :adjust-position="false" @focus="getKeywordsHeight" @blur="resetKeywordsHeight()"/>
				<view class="sendbtn" @tap="sendCommitorReply">
					<text>发送</text>
				</view>
			</view>
			<view class="zwk" v-show="iskeyWordspopup"></view>
		</u-popup>
	</view>
</template>

<script>
	import {recommendDeatil,recommendCommits,recommendSendcommit,recommendGiveup,recommendCollect,recommendCommitsreplys,recommendSendreply,replyCommitGiveup} from '@/apis/request.js'
	export default {
		data() {
			return {
				nowDots:1,
				ifLike:false,
				recommendid:'',
				userInfo:{},
				recommenddetail:{},
				loading:true,
				images:[],
				showTrendscommitsList:false,
				commitslist:[],
				ifFristrequestCommits:true,
				isLogined:false,
				commitText:'',
				ifCollect:false,
				isshowCommitreply:[],
				sendStatus:'commit',
				placeholderText:'我来说俩句...',
				replyCommit:{
					commitid:'',
					commiter:'',
					commitindex:-1
				},
				//评论 防连点
				commitRepeatDefen:[],
				//回复 防连点
				replyRepeatDefen:[],
				replysList:[],
				keywordsHeight:0,
				//键盘是否被拉起
				iskeyWordspopup:false,
				allowScroll:true
			};
		},
		onLoad(options) {
			this.recommendid=options.recommendid;
			if(uni.getStorageSync('userInfo')){
				this.userInfo=uni.getStorageSync('userInfo');
				this.isLogined=true;
			}else{
				this.isLogined=false;
			}
			
			this.getRecommendDetail();
		},
		methods:{
			swiperChange(e){
				this.nowDots = e.detail.current+1
			},
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getRecommendDetail(){
				uni.showLoading({
					title:'加载中'
				});
				this.$http({
					url:recommendDeatil,
					method:"POST",
					data:{
						id:this.recommendid,
					},
					header:{
						'Token':this.isLogined?this.userInfo.token:'',
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					if(res[1].data.status=='200')
					{   
						uni.hideLoading();
						this.recommenddetail=res[1].data.data;
						this.images=res[1].data.data.img.split(',');
						if(res[1].data.data.isthumb=='1'){
							this.ifLike=true;
						}else{
							this.ifLike=false;
						}
						if(res[1].data.data.isCollection=='1'){
							this.ifCollect=true;
						}else{
							this.ifCollect=false;
						}
					    this.loading=false;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			openTrendscommitsList(){
				this.showTrendscommitsList=true;
				if(!this.ifFristrequestCommits){
					return ;
				}
				this.$http({
					url:recommendCommits,
					method:"POST",
					data:{
						circleId:this.recommendid
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.isLogined?this.userInfo.token:''
					}
				})
				.then(res=>{
					if(res[1].data.status=='200'){
					   this.commitslist=res[1].data.data;
					   this.isshowCommitreply=new Array(res[1].data.data.length).fill(false);
					   this.commitRepeatDefen=new Array(res[1].data.data.length).fill(true);
					   this.ifFristrequestCommits=false;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//发送评论
			sendCommit(){
				if(!this.isLogined){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					});
					uni.setStorageSync('pagehref',{
					    url:'/pages/index/indexDetails/indexDetails',
						options:{
							recommendid:this.recommendid
						}
					});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},500);
					return ;
				}
				this.$http({
					url:recommendSendcommit,
					method:"POST",
					data:{
						circleId:this.recommendid,
						content:this.commitText
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.userInfo.token
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						this.commitText='';
						this.commitslist.push(res[1].data.data);
					}
				})
				.catch(err=>{
					console.log(err);
				})
			},
			// 点赞文章
			giveupWords(){
				if(!this.isLogined){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					});
					uni.setStorageSync('pagehref',{
					    url:'/pages/index/indexDetails/indexDetails',
						options:{
							recommendid:this.recommendid
						}
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						});
					},500);
					return ;
				}
				this.ifLike=this.recommenddetail.isthumb=='0'?true:false;
				if(this.recommenddetail.isthumb=='0'){
					this.recommenddetail.giveUpCount++;
				}else{
					this.recommenddetail.giveUpCount--;
				}
				this.recommenddetail.isthumb=this.recommenddetail.isthumb=='0'?'1':'0';
				this.$http({
					url:recommendGiveup,
					method:"POST",
					data:{
						circleId:this.recommendid,
						isWhether:this.ifLike?1:2,
						type:3
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.userInfo.token
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200')
					{
						//点赞/取消点赞成功
						uni.showToast({
							title:this.ifLike?'已点赞':'已取消'
						});
					}
					
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//收藏文章
			collectWords(){
				if(!this.isLogined){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					});
					uni.setStorageSync('pagehref',{
					    url:'/pages/index/indexDetails/indexDetails',
						options:{
							recommendid:this.recommendid
						}
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						});
					},500)
					return ;
				}
				this.ifCollect=this.recommenddetail.isCollection=='0'?true:false;
				if(this.recommenddetail.isCollection=='0'){
					this.recommenddetail.collectionCount++;
				}else{
					this.recommenddetail.collectionCount--;
				}
				this.recommenddetail.isCollection=this.recommenddetail.isCollection=='0'?'1':'0';
				this.$http({
					url:recommendCollect,
					method:"POST",
					data:{
						circleId:this.recommendid,
						isCollection:this.ifCollect?1:2,
						type:3
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.userInfo.token
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						//收藏、取消收藏成功
						uni.showToast({
							title:this.ifCollect?'已收藏':'已取消'
						})
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			previewImages(current){
				uni.previewImage({
					urls:this.images,
					current:current,
					indicator:'number'
				});
			},
			showCommitReply(commitIndex){
				this.$http({
					url:recommendCommitsreplys,
					method:"POST",
					data:{
						circleId:this.recommendid,
						appEvaluateId:this.commitslist[commitIndex].id
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.isLogined?this.userInfo.token:''
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						if(res[1].data.data.length>0){
							this.replysList[commitIndex]=res[1].data.data.reverse();
						}else{
							this.replysList[commitIndex]=[];
						}
						let arr=new Array(res[1].data.data.length).fill(true);
						// console.log(arr);
						this.replyRepeatDefen[commitIndex]=arr;
						this.$set(this.isshowCommitreply,commitIndex,true);
					}
				})
				.catch(err=>{
					console.log(err);
				})
			},
			//回复
			sendReply(){ 
				if(!this.isLogined){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					});
					return ;
					uni.setStorageSync('pagehref',{
					    url:'/pages/index/indexDetails/indexDetails',
						options:{
							recommendid:this.recommendid
						}
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						});
					},500);
				}
				this.$http({
					url:recommendSendreply,
					method:"POST",
					data:{
						appEvaluateId:this.replyCommit.commitid,
						circleId:this.recommendid,
						content:` 回复 ${this.replyCommit.commiter}:${this.commitText}`
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.userInfo.token
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						// 前端假刷新
						this.replysList[this.replyCommit.commitindex].push(res[1].data.data);
						// console.log(this.replysList)
						this.commitText='';
						console.log('123');
						this.closeCommitList();
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//变为回复状态
			changeReplystatus(commititem,commitindex){
				this.sendStatus='reply';
				this.placeholderText=`回复${commititem.userName}`;
				this.replyCommit.commitid=commititem.id;
				this.replyCommit.commiter=commititem.userName;
				this.replyCommit.commitindex=commitindex;
			},
			//关闭弹窗时 变为评论状态
			closeCommitList(){
				if(this.sendStatus=='reply'){
					this.sendStatus='commit';
					this.placeholderText='我来说俩句...';
					this.replyCommit.commitid='';
					this.replyCommit.commiter='';
					this.replyCommit.commitindex=-1;
				}
			},
			// 判定是评论还是回复
			sendCommitorReply(){
				if(this.sendStatus=='commit'){
					this.sendCommit();
				}else if(this.sendStatus=='reply'){
					this.sendReply();
				}
			},
			//点赞评论
			giveupCommit(commititem,commitindex){
				if(!this.commitRepeatDefen[commitindex]){
					return ;
				}
			    if(!this.isLogined){
			    	uni.showToast({
			    		icon:'none',
			    		title:'请先登录'
			    	});
			    	
			    	uni.setStorageSync('pagehref',{
			    	    url:'/pages/index/indexDetails/indexDetails',
			    		options:{
			    			recommendid:this.recommendid
			    		}
			    	});
			    	setTimeout(()=>{
			    		uni.navigateTo({
			    			url:'/pages/login/login'
			    		});
			    	},500);
					return ;
			    }
				this.$set(this.commitRepeatDefen,commitindex,false);
				const commitGiveup=this.commitslist[commitindex].isWhether;
				this.commitslist[commitindex].isWhether=commitGiveup=='0'||!commitGiveup?'1':'0';
				if(commitGiveup=='0'||!commitGiveup){
					this.commitslist[commitindex].dianzanUpNum++;
				}else{
					this.commitslist[commitindex].dianzanUpNum--;
				}
				setTimeout(()=>{
					this.$set(this.commitRepeatDefen,commitindex,true);
				},200);
				this.$http({
					url:replyCommitGiveup,
					method:"POST",
					data:{
						circleId:this.recommendid,
						isWhether:commitGiveup=='0'||!commitGiveup?1:2,
						appEvaluateId:commititem.id
					},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.userInfo.token
					}
				})
				.then(res=>{
					//console.log(res);
				})
				.catch(err=>{
					console.log(err);
				});
			},
			//点赞回复
			giveupReply(commitindex,replyitem,replyindex){
				console.log('123');
				if(!this.isLogined){
					uni.showToast({
						icon:'none',
						title:'请先登录'
					});
					return ;
					uni.setStorageSync('pagehref',{
					    url:'/pages/index/indexDetails/indexDetails',
						options:{
							recommendid:this.recommendid
						}
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						});
					},500);
				}
				if(!this.replyRepeatDefen[commitindex][replyindex]){
					return ;
				}
				this.$set(this.replyRepeatDefen[commitindex],replyindex,false);
				const replyGiveup=replyitem.isWhether;
				let replysList=this.replysList[commitindex];
				
				if(replyGiveup=='0'){
					replysList[replyindex].dianzanUpNum++;
					replysList[replyindex].isWhether='1';
					
				}else if(replyGiveup=='1'){
					replysList[replyindex].dianzanUpNum--;
					replysList[replyindex].isWhether='0';
				}
				this.$set(this.replysList,commitindex,replysList);
				// console.log(this.replysList)
				this.$http({
					url:replyCommitGiveup,
					method:"POST",
					data:{
						circleId:this.recommendid,
						isWhether:replyGiveup=='0'?1:2,
						appCommentReplyId:replyitem.id
					},
					header:{
					   'content-type':'application/x-www-form-urlencoded',
					   'Token':this.userInfo.token
					}
				})
				.then(res=>{
					setTimeout(()=>{
						this.replyRepeatDefen[commitindex][replyindex]=true;
					},200);
				})
				.catch(err=>{
					console.log(err);
				});
			},
			getKeywordsHeight(event){
				console.log(event);
				this.allowScroll=false;
				this.iskeyWordspopup=true;
				this.keywordsHeight=event.detail.height;
			},
			resetKeywordsHeight(){
				this.allowScroll=true;
				this.iskeyWordspopup=false;
				this.keywordsHeight=0;
			}
		},
		computed:{
		   
		},
		filters:{
				
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
.placStyle{
	color: #888888;
	font-size: 26rpx;
	margin-left: 18rpx;
}
.indexDetails_swiper_box{
	width: 750rpx;
	height: 552rpx;
	position: relative;
	.indexDetails_back{
		width: 25rpx;
		height: 39rpx;
		position: absolute;
		left: 30rpx;
		top: 68rpx;
		z-index: 9;
	}
	.indexDetails_swiper{
		width: 100%;
		height: 100%;
		.indexDetails_swiper_banner{
			width: 100%;
			height: 100%;
		}
	}
	.indexDetails_dots{
		width: 81rpx;
		height: 45rpx;
		border-radius: 10rpx;
		background: rgba(0,0,0,0.3);
		text-align: center;
		position: absolute;
		right: 30rpx;
		bottom: 25rpx;
		text{
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
}
.indexDetails_title{
	padding: 42rpx 30rpx 42rpx 30rpx;
	text{
		font-size: 38rpx;
		color: #222222;
		font-weight: bold;
	}
}
.indexDetails_uploadUser{
	padding: 0 30rpx;
	&_content{
		width: 100%;
		height: 160rpx;
		background-color: #F3F3F3;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding-left: 41rpx;
		image{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 36rpx;
		}
		text{
			color: #222222;
			font-size: 34rpx;
			font-weight: 500;
		}
	}
}
.indexDetails_article{
	padding: 0 30rpx 20rpx 30rpx;
	font-size: 30rpx !important;
}
.indexDetails_bottom{
	width: 750rpx;
	height: 113rpx;
	border-top: 2rpx solid #F3F3F3;
	position: fixed;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	&_inputBox{
		width: 352rpx;
		height: 77rpx;
		background-color: #F4F8FB;
		border-radius: 10rpx;
		padding-left: 18rpx;
		font-size: 26rpx;
		line-height: 77rpx;
	}
	&_functionBox{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-left: 20rpx;
		.functionBox_list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.heart{
				width: 36rpx;
				height:36rpx;
				
			}
			.likeHeart{
				width: 36rpx;
				height: 36rpx;
				animation: like .3s ;
			}
			.mesage{
				width: 46rpx;
				height: 40rpx;
			}
			text{
				color: #888888;
				font-size: 26rpx;
				margin-top: 8rpx;
			}
		}
	}
}
@keyframes like{
	from { transform: none; }
	 to { transform: scale(1.2); }
} 
.loadingmask{
    width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	position: fixed;
	top: 0rpx;
	bottom: 0rpx;
	z-index: 1000;
}
.commitslist-title{
			 font-size: 30upx;
			 font-weight: bold;
			 display: block;
			 width: 100%;
			 text-align: center;
			 line-height: 80upx;
		 }
		 .commitslist{
			 width: 690upx;
			 margin:auto;
			 height: auto;
			 .commititem{
				 width: 100%;
				 height: auto;
				 margin-top: 30upx;
			 }
			 .commitinfo{
				 width: 100%;
				 height: auto;
				 display: flex;
				 flex-wrap: wrap;
			 }
			 .commits{
				width: 570rpx;
				text{
					display: block;
					word-break: break-all;
				}
				margin-left: 20rpx;
			}
			.commit-time{
				font-size: 25upx;
				color: rgba(136, 136, 136, 1);
				margin-top: 15upx;
			}
		    .commit-text{
				font-size: 28upx;
				margin-top: 15upx;
				color: rgba(34, 34, 34, 1);
			}
			.commitdz{
				display: flex;
				align-items: center;
				text{
					margin-right: 10rpx;
				}
			}
			 .commit-user-dz{
				 display: flex;
				 width: 100%;
				 justify-content: space-between;
				 font-size: 30upx;
				 color: rgba(136, 136, 136, 1);
			 }
		 }
		 .sendcommits{
			 width:100%;
			 height: 107rpx;
			 margin: auto;
			 display: flex;
			 textarea{
				 font-size: 28upx;
				 padding: 15rpx;
				 background-color: #f4f8f8;
				 width: 580upx;
				 height: 77rpx;
			 }
			 
			 align-items: center;
			 .sendbtn{
				 font-size: 28upx;
				 color: rgba(255, 255, 255, 1);
				 flex: 1;
				 text-align: center;
				 background-color: rgba(14, 174, 100, 1);
				 height: 105rpx;
				 line-height: 105rpx;
			 }
		 }
		 .zwk{
			 width: 100%;
			 height: 107rpx;
		 }
		 .replys{
		 	display: flex;
		 	flex: 1;
		 	flex-wrap: wrap;
		 	width: 100%;
		    text{
		 		display: block;
		 		word-break: break-all;
		 	}
		 	margin-top: 10rpx;
		 }
		 .replys-user-dz{
		 	width: 100%;
		 	display: flex;
		 	width: 100%;
		 	justify-content: space-between;
		 	font-size: 30upx;
		 	color: rgba(136, 136, 136, 1);
		 }
		 .replayinfo{
		 	display:flex;
		 	flex: 1;
		 	width: 100%;
		 	margin-left: 10rpx;
		 	flex-wrap: wrap;
		 }
		 .showcommit-reply{
			 color: #2b85e4;
			 margin-top: 20rpx;
			 font-size: 24rpx;
		 }
		 .reply-null{
			 color: #888;
			 margin-top: 20rpx;
			 font-size: 24rpx;
		 }
		 .input-absolute{
			 position: absolute;
			 textarea{height: 77rpx;}
		 }
</style>
